<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript" src="/js/vue.js"></script>
<title>Vue.js</title>
</head>
<body>
	<h1>VUE生命周期</h1>
	<hr></hr>
	<div id="app">
		{{count}}
		<p>
			<button v-on:click="add" >ADD</button>
		</p>
	</div>
	
	<button onclick="destroy()">销毁</button>
	
	<script type="text/javascript">
	
		function destroy(){
			app.$destroy();
		}
	
		var app = new Vue({
			
			el:'#app',
			data:{
				count:1
			},
			methods:{
				add:function(){
					this.count++;
				}
			},
			beforeCreate:function(){
				console.log('1-beforeCreate 初始化之前');
			},
			created:function(){
				console.log('2-created 创建完成');
			},
			beforeMount:function(){
				console.log('3-beforeMount 挂载之前');
			},
			mounted:function(){
				console.log('4-mounted 被挂载之后');
			},
			beforeUpdate:function(){
				console.log('5-beforeUpdate 数据更新前');
			},
			updated:function(){
				console.log('6-updated 被更新后');
			},
			activated:function(){
				console.log('7-activated');
			},
			deactivated:function(){
				console.log('8-deactivated');
			},
			beforeDestroy:function(){
				console.log('9-beforeDestory 销毁之前');
			},
			destroyed:function(){
				console.log('10-destroyed 销毁之后');
			},
			
		});
	</script>
</body>
</html>